<template>
  <div class="outer-box">
    <div class="center-box">
      <div class="login-box">
        <div class="left-info">
          <div class="title"><img class="left-info-logo" alt="logo" src="../../../assets/logo.png" /></div>
          <div class="introduction">
            Aether(以太)是古希腊哲学家亚里士多德所设想的一种物质，物质现象界的万物生存在其内，是除了水、火、气、土四大基本元素之外的第五元素，希望带来优雅、强大、快速、创新的开发体验，为您快速搭建系统提供强有力的支持。<br /><br />
            目前平台处于起步阶段，欢迎提出您宝贵的意见，我们会让 Aether 变得更加强大。
          </div>
          <div class="left-info-bottom">
            <el-divider></el-divider>
            <div class="doc-href-box">
              <a href="#" class="doc-href">点击查看文档
                <el-icon class="doc-href-icon">
                  <ArrowRightBold />
                </el-icon>
              </a>
            </div>
          </div>
        </div>
        <div class="right-info">
          <div class="right-info-top">
            <div class="login-font">登录</div>
            <span class="register">没有账号？ <a href="#" class="register-href">点击注册</a></span>
          </div>
          <div class="right-info-error" v-show="loginError">{{ loginErrorMsg }}</div>
          <div class="login-form-box">
            <el-form :model="loginForm" :rules="rules" ref="loginFormRef">
              <el-form-item prop="userName">
                <el-input v-model="loginForm.userName" class="form-item-input" placeholder="请输入用户名" :prefix-icon="User"
                  clearable></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="loginForm.password" class="form-item-input" type="password" placeholder="请输入密码"
                  :prefix-icon="Lock" :show-password="true"></el-input>
              </el-form-item>
              <el-form-item prop="tenantId">
                <el-select size="large" placeholder="请选择租户" v-model="loginForm.tenantId" clearable>
                  <el-option place v-for="item in tenantList" :key="item.id" :label="item.label"
                    :value="item.label"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="showCaptcha" prop="captcha">
                <div class="captcha-box">
                  <el-input class="captcha-input" :prefix-icon="Pointer" v-model="loginForm.captcha"
                    placeholder="请输入验证码"></el-input>
                  <span class="captcha-img-span"></span>
                </div>
              </el-form-item>
              <el-form-item>
                <div class="form-bottom-box">
                  <el-checkbox v-model="rememberFlag" label="30天内自动登录" />
                  <a href="#" class="phone-message-login-href">短信验证码登录</a>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onLogin(loginFormRef)" color="rgb(243,141,48)"
                  class="login-button">登&nbsp;&nbsp;录</el-button>
              </el-form-item>
            </el-form>
            <div class="forget-password-box">
              <a href="#" class="forget-password-href">已有账号，忘记密码？</a>
            </div>
            <div class="other-login-divider">
              <el-divider content-position="center">其他方式登录</el-divider>
              <div class="other-login-box">
                <alipay-circle-outlined class="other-login-method other-login-alipay" />
                <weibo-circle-outlined class="other-login-method other-login-weibo" />
                <taobao-circle-outlined class="other-login-method other-login-taobao" />
                <github-outlined class="other-login-method other-login-github" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-info">
        <a href="#" class="bottom-a-href">© Aether.cn</a>
        <a href="#" class="bottom-a-href">关于我们</a>
        <a href="#" class="bottom-a-href">帮助文档</a>
        <a href="#" class="bottom-a-href">在线服务</a>
        <a href="#" class="bottom-a-href">意见反馈</a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, unref } from 'vue'
import { User, Lock, Pointer, ArrowRightBold } from '@element-plus/icons-vue'
import { ElNotification, type FormInstance, type FormRules } from 'element-plus'
import request from '@/utils/request.ts'
import { WeiboCircleOutlined, TaobaoCircleOutlined, AlipayCircleOutlined, GithubOutlined } from '@ant-design/icons-vue'
import { useStore } from '@/store'
import { useRouter } from 'vue-router'

const store = useStore()
const router = useRouter()

// 登录表单类型
interface LoginForm {
  userName: string,
  password: string,
  captcha: string,
  tenantId: number
}

// 表单实例
const loginFormRef = ref<FormInstance>()
// 表单数据
const loginForm = reactive({
  userName: '',
  password: '',
  captcha: '',
  tenantId: ''
})
// 租户列表
const tenantList = ref([
  {
    id: 1,
    label: '默认租户'
  }
])
// 验证码显示
const showCaptcha = ref(true)
// 是否30天内记住
const rememberFlag = ref(false)
// 登录错误信息
const loginErrorMsg = ref('')
// 是否登录异常
const loginError = ref(false)
// 表单校验规则
const rules = reactive<FormRules<LoginForm>>({
  userName: [
    { required: true, message: '请输入用户名！', trigger: 'blur' },
    { min: 2, max: 20, message: '请输入一个2-20长度的用户名！', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码！', trigger: 'blur' }
  ],
  tenantId: [
    { required: true, message: '请选择租户！', trigger: 'change' }
  ],
  captcha: [
    { required: unref(showCaptcha), message: '请输入验证码', trigger: 'blur' }
  ]
})


// 登录方法
const onLogin = async (formInstance: FormInstance | undefined) => {
  if (!formInstance) {
    return
  }
  await formInstance.validate((valid, fields) => {
    if (!valid) {
      console.log('登录表单验证失败！', fields)
      return
    }
  })
  // 表单验证通过，请求登录接口
  request.post('/auth/login', loginForm).then((res: HttpResult) => {
    if (res.code == 200) {
      // 登录验证失败
      if (!res.data['SUCCESS_FLAG']) {
        loginError.value = true
        loginErrorMsg.value = res.data['MESSAGE']
      } else {
        // 登录成功 缓存token，跳转首页
        store.commit('setToken', res.data['TOKEN'])
        store.commit('setUserInfo', res.data['USER_INFO'])
        router.push('/')
        ElNotification({
          title: '登录成功',
          message: getGreeting(store.state.userInfo['USER_ALL_NAME']),
          type: 'success'
        })
      }
    }
  })
}

/**
 * 根据时间段获取登录问候语
 * @param userAllName 用户名称
 */
const getGreeting = (userAllName: string) => {
  const hour = new Date().getHours()
  let greeting
  if (hour >= 5 && hour < 9) {
    greeting = '早上好'
  } else if (hour >= 9 && hour < 12) {
    greeting = '上午好'
  } else if (hour >= 12 && hour < 14) {
    greeting = '中午好'
  } else if (hour >= 14 && hour < 18) {
    greeting = '下午好'
  } else {
    greeting = '晚上好'
  }
  greeting += '，' + userAllName + '，欢迎访问！'
  return greeting
}
</script>

<style lang="less">
.el-divider__text {
  background-color: #f5f5f5;
}
.outer-box:before,
.outer-box:after {
  content: '';
  position: fixed;
  bottom: 0;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: -2;
}

.outer-box:after {
  width: 562px;
  height: 468px;
  background-image: url("@/assets/login/right.png");
  right: 0;
}

.outer-box:before {
  width: 587px;
  height: 468px;
  background-image: url("@/assets/login/left.png");
  left: 0;
}

.outer-box {
  background-color: #dfdfdf;;
  width: 100vw;
  height: 100vh;
  position: relative;
  z-index: 0;

  .center-box {
    width: 1000px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .login-box {
      display: flex;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 45px 45px 35px rgba(0, 0, 0, 0.2), -45px -45px 35px rgba(255, 255, 255, 1);

      .left-info {
        width: 50%;
        min-height: 564px;
        background-color: #8e9aad;
        padding: 85px 75px 85px 75px;

        .left-info-logo {
          width: 180px;
        }

        .title {
          color: #f3f3f3;
          font-size: 25px;
        }

        .introduction {
          margin-top: 15px;
          color: #f3f3f3;
          min-height: 70%;
        }

        .left-info-bottom {
          .doc-href-box {
            display: flex;
            justify-content: center;

            .doc-href {
              font-size: 15px;
              color: #dcdcdc;

              .doc-href-icon {
                color: white;
                position: relative;
                top: 2px;
                left: 10px
              }
            }

            .doc-href:hover {
              color: rgb(3, 152, 224);

              .doc-href-icon {
                color: rgb(3, 152, 224);
              }
            }
          }
        }
      }

      .right-info {
        width: 50%;
        padding: 60px 70px 48px 70px;
        background-color: #f5f5f5;

        .right-info-top {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-content: end;

          .login-font {
            font-size: 25px;
            font-weight: 600;
            color: #4b4b4b;
          }

          .register {
            margin-top: 10px;
            font-size: 14px;
            color: #7e7e7e;

            .register-href {
              color: #257eb4;
            }
          }
        }

        .right-info-error {
          width: 100%;
          background-color: #f7abab;
          min-height: 45px;
          margin-top: 15px;
          display: flex;
          align-items: center;
          padding: 0 10px 0 10px;
          font-size: 14px;
          color: #333333;
          border: #fb6f6f 1px solid;
          border-radius: 3px;
        }

        .login-form-box {
          margin-top: 20px;

          .form-item-input {
            min-height: 43px;
          }

          .captcha-box {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .captcha-input {
              width: 65%;
              height: 40px;
            }

            .captcha-img-span {
              width: 30%;
              background-color: #546175;
              height: 40px;
              cursor: pointer;
            }
          }

          .form-bottom-box {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .phone-message-login-href {
              color: #257eb4;
            }
          }

          .login-button {
            width: 100%;
            height: 40px;
            font-size: 18px;
            color: white;
            font-weight: 600;
          }

          .forget-password-box {
            display: flex;
            justify-content: center;

            .forget-password-href {
              color: #257eb4;
              font-size: 14px;
            }
          }

          .other-login-divider {
            margin-top: 25px;

            .other-login-box {
              display: flex;
              justify-content: space-around;

              .other-login-method {
                font-size: 33px;
                cursor: pointer;
              }

              .other-login-alipay {
                color: rgb(3, 152, 224)
              }

              .other-login-weibo {
                color: rgb(234, 128, 17)
              }

              .other-login-taobao {
                color: rgb(255, 80, 0)
              }

              .other-login-github {
                color: rgb(10, 2, 3)
              }
            }
          }
        }
      }
    }

    .bottom-info {
      width: 55%;
      height: 85px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 0 auto;

      .bottom-a-href {
        color: #7e7e7e;
        font-size: 14px;
      }
    }
  }
}
</style>
